{# Jumping through hoops to get a relative path to the site root #}
{%- if current_path == "/" -%}
  {%- set_global rel_top = "./" -%}
{%- else -%}
  {%- set_global rel_top_work = [] -%}
  {%- for _ignored in current_path | split(pat="/") | slice(start=1) -%}
    {%- set_global rel_top_work = rel_top_work | concat(with="..") -%}
  {%- endfor -%}
  {%- set_global rel_top = rel_top_work | join(sep="/") -%}
  {%- set_global rel_top = rel_top ~ "/" -%}
{%- endif -%}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
    <title>{% block title %}{{ config.title }}{% endblock title %}</title>
    <!-- favicon-generator.org: -->
    <link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="manifest" href="manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <!-- end of favicons -->

    {% if config.extra.google_analytics_id %}
    <script async src="https://www.googletagmanager.com/gtag/js?id={{ config.extra.google_analytics_id }}"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', '{{ config.extra.google_analytics_id }}');
    </script>
    {% endif %}

    <link rel="stylesheet" href="{{ rel_top ~ 'assets/fontawesome.min.css' | safe }}">
    <link rel="stylesheet" href="{{ rel_top ~ 'style.css' | safe }}">
    <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    {% block extra_head %}
    {% endblock extra_head %}
  </head>

  <body>
    <header>
      <div class="maxwidth">
        <a href="{{ config.extra.logo_url | safe }}">
          <img class="header-logo-lg" src="{{ rel_top ~ 'assets/horizontal-logomark_black-on-transparent_260x71.png' | safe }}">
          <img class="header-logo-sm" src="{{ rel_top ~ 'assets/wwt-globe.png' | safe }}">
        </a>

        <h1>The WWT Documentation Hub</h1>
      </div>
    </header>

    <div class="maxwidth">
      <main class="content">
        {% block content %}
        {% endblock content %}
      </main>

      <footer>
        <p>Copyright {{ now() | date(format="%Y") }} WorldWide Telescope contributors.
          HTML generated with <a href="https://www.getzola.org/">Zola</a>.
          <a href="{{ config.extra.github_url | safe }}">Source code</a>.
        </p>

        <a class="footer-icon" href="{{config.extra.twitter_url | safe}}" title="Twitter" aria-label="Twitter">
          <i class="fa fa-twitter"></i>
        </a>

        <a class="footer-icon" href="{{config.extra.github_url | safe}}" title="Git repository" aria-label="Git repository">
          <i class="fa fa-github"></i>
        </a>

        <a class="footer-icon" href="{{config.extra.facebook_url | safe}}" title="Facebook" aria-label="Facebook">
          <i class="fa fa-facebook"></i>
        </a>
      </footer>
    </div>
  </body>
</html>
